<template>
  <div class="barChart">
    <div id="barsChartofstatistic" class="echart"></div>
  </div>
</template>

  <script>
import echarts from "@/utils/lib/echarts";
import { BarChart } from "echarts/charts";
import colorConst from "@/utils/custom-color.js";
echarts.use([BarChart]);
export default {
  name: "BarChartofsta",
  props: {
    // 图数据
    statusList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    statusList: {
      handler(val) {
        if (val) {
          this.getChartsdata(this.statusList);
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  beforeDestroy() {
    this.chartDes();
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    getChartsdata(barData) {
      let xaxisData = [];
      let yAxisData = [];
      let seriesData = [];
      let colorArr = [
        "#4E5469",
        "#009CA1",
        "#FF8D77",
        "#3669D4",
        "#E1B228",
        "#C44729",
      ];
      barData.map((item, index) => {
        xaxisData.push(item.name);
        yAxisData.push(item.value);
        let obj = {
          name: item.name,
          data: [item.value],
          color: colorArr[index],
          type: "bar",
          stack: "",
          label: {
            show: true,
            formatter: "{name|{a}} {c}",
            fontSize: 12,
            position: "outside",
            rich: {
              name: {},
            },
          },
          // itemStyle: {
          //   normal: {
          //     //这里是颜色
          //     color: colorArr[index],
          //     // color: function (params) {
          //     //   //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          //     //   var colorList = [
          //     //     "#CCCCCC",
          //     //     "rgb(104, 187, 196)",
          //     //     "rgb(149, 29, 29)",
          //     //     "rgb(80, 135, 236)",
          //     //   ];
          //     //   return colorList[index];
          //     // },
          //   },
          // },
        };
        if (item.code == 1 || item.code == 2) {
          if (item.value > 0) {
            // obj.name = "人工干预";
            obj.stack = "rggy";
            obj.label = {
              show: true,
              formatter: "{name|{a}} {c}",
              fontSize: 12,
              rich: {
                name: {},
              },
            };
          }
        }
        seriesData.push(obj);
        return item;
      });
      let option = {
        color: colorConst.customColorarr,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // legend: {},
        xAxis: [
          {
            type: "category",
            // data: xaxisData,
            // data: ["人工干预"],
            data: [""],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            interval: 200,
            axisLabel: {
              formatter: "{value} 条",
            },
          },
        ],
        grid: {
          left: "1%",
          right: "1%",
          // bottom: "10%",
          top: "5%",
          containLabel: true,
        },
        series: seriesData.length == barData.length ? seriesData : [],
        // series: [
        //   {
        //     data: yAxisData,
        //     type: "bar",
        //     stack: "",
        //     itemStyle: {
        //       normal: {
        //         //这里是颜色
        //         color: function (params) {
        //           //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
        //           var colorList = [
        //             "#CCCCCC",
        //             "rgb(104, 187, 196)",
        //             "rgb(149, 29, 29)",
        //             "rgb(80, 135, 236)",
        //           ];
        //           return colorList[params.dataIndex];
        //         },
        //       },
        //     },
        //   },
        // ],
      };
      this.initChart("barsChartofstatistic", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

  <style scoped lang="scss">
.barChart {
  .echart {
    width: 100%;
    height: 300px;
  }
}
</style>
